/*
 * @Description: 检查填报
 * @Author: mengjiajun
 * @Date: 2023-12-25 14:51:35
 * @LastEditors: mengjiajun
 * @LastEditTime: 2023-12-27 16:00:01
 * @FilePath: \foodstuff-safety-responsibility\src\pages\IntelFilling\components\WeekReport\components\CheckAndFillIn\index.tsx
 */

import { useState } from "react";
import Taro from "@tarojs/taro";
import { ArrowRight } from "@taroify/icons";
import { Text, View } from "@tarojs/components";
import { Button, Textarea } from "@taroify/core";
import classNames from "classnames";
import MainContent from "./components/MainContent";
import CheckItem from "./components/CheckItem";

const CheckAndFillIn: React.FC = () => {
  const [curStep] = useState(0);

  // 生产环境条件
  const [prodEnvOptions] = useState([
    {
      title:
        "厂区是否有扬尘、是否有积水，厂区、车间是否卫生整洁。卫生间是否保持清洁。",
    },
  ]);
  // 进货查验
  const [restockOptions] = useState([
    {
      title:
        "是否查验食品原料、食品添加剂、食品相关产品供货者的许可证、产品合格证明文件等；供货者无法提供有效合格证明文件的，是否有检验记录。",
    },
  ]);
  // 生产过程控制
  const [prodProcessOptions] = useState([
    {
      title:
        "使用的食品原料、食品添加剂、食品相关产品的品种是否与索证索票、进货查验记录内容一致。",
    },
  ]);
  // 产品检验
  const [prodInsOptions] = useState([
    {
      title: "企业自检的，是否按照食品安全标准规定进行检验。",
    },
  ]);
  // 贮存与交付控制
  const [deliveryOptions] = useState([
    {
      title: "食品原料、食品相关产品的贮存是否专人管理，贮存条件是否符合要求。",
    },
  ]);
  // 不合格食品管理和食品召回
  const [foodManageOptions] = useState([
    {
      title: "是否有不合格品的处置记录，不合格品的批次、数量是否与记录一致。",
    },
  ]);
  // 标签和说明书
  const [labelOptions] = useState([
    {
      title: "预包装食品的包装是否有标签，标签标注的事项是否完整、真实、合规。",
    },
  ]);
  // 从业人员管理
  const [personManageOptions] = useState([
    {
      title:
        "是否有食品安全总监、食品安全员、食品安全专业技术人员培训和考核记录，是否存在未经考核或考核不合格人员上岗的情况",
    },
  ]);
  // 信息记录和追溯
  const [infoRecordsOptions] = useState([
    {
      title:
        "是否有食品安全追溯记录，相关记录真实、准确。电子记录信息应与纸质记录信息一致。",
    },
  ]);
  // 食品安全事故处置
  const [accidentOptions] = useState([
    {
      title: "是否有食品安全处置方案，是否定期检查食品安全防范措施落实情况。",
    },
  ]);

  return (
    <View className="w-full h-[100vh] flex flex-col">
      <View className="flex">
        {["检查填报", "自检结论", "信息提交"].map((_item, _index) => (
          <View
            key={_index}
            className="h-[80px] w-1/3 flex items-center justify-evenly"
          >
            <View
              className={classNames(
                "w-5 h-5 rounded-full flex items-center justify-center text-white",
                curStep === _index
                  ? " bg-[#3388ff]"
                  : "bg-[rgba(51,136,255,0.5)]"
              )}
            >
              {_index + 1}
            </View>
            <Text>{_item}</Text>
            <ArrowRight />
          </View>
        ))}
      </View>
      <View className="flex-1 bg-[#FDEDDA] p-4 flex flex-col overflow-auto">
        <MainContent />
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            1.生产环境条件
          </View>
          <CheckItem options={prodEnvOptions} />
        </View>
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            2.进货查验
          </View>
          <CheckItem options={restockOptions} />
        </View>
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            3.生产过程控制
          </View>
          <CheckItem options={prodProcessOptions} />
        </View>
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            4.产品检验
          </View>
          <CheckItem options={prodInsOptions} />
        </View>
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            5.贮存与交付控制
          </View>
          <CheckItem options={deliveryOptions} />
        </View>
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            6.不合格食品管理和食品召回
          </View>
          <CheckItem options={foodManageOptions} />
        </View>
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            7.标签和说明书
          </View>
          <CheckItem options={labelOptions} />
        </View>
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            8.从业人员管理
          </View>
          <CheckItem options={personManageOptions} />
        </View>
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            9.信息记录和追溯
          </View>
          <CheckItem options={infoRecordsOptions} />
        </View>
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            10.食品安全事故处置
          </View>
          <CheckItem options={accidentOptions} />
        </View>
        <View className="w-full">
          <View className="text-[#694111] h-[80px] flex items-center">
            10.其他问题
          </View>
          <View className="bg-white rounded-lg p-4 border border-solid border-[#aaaaaa]">
            <Textarea className="h-[160px]" placeholder="请输入其他问题" />
          </View>
        </View>
        <View className="w-full h-[160px] flex gap-2 px-[24px] items-center flex-shrink-0">
          <Button color="primary" className="w-1/2">
            暂存
          </Button>
          <Button
            color="primary"
            className="w-1/2"
            onClick={() => {
              Taro.navigateTo({
                url: "/pages/IntelFilling/components/WeekReport/components/SelfTestConclusion/index",
              });
            }}
          >
            确认并下一步
          </Button>
        </View>
      </View>
    </View>
  );
};

export default CheckAndFillIn;
